<template>
	<view class="zb-table-footer" style="height: 40px">
		<view class="zb-table-fixed">
			<view class="zb-table-thead" style="position: relative">
				<view class="item-tr">
					<view
						:class="[
							'item-th',
							index < fixedLeftColumns.length && 'zb-stick-side',
						]"
						:style="{
							left: `${item.left}px`,
							width: `${item.width ? item.width : '100'}px`,
							flex:
								index === transColumns.length - 1 ? 1 : 'none',
							minWidth: `${item.width ? item.width : '100'}px`,
							borderRight: `${border ? '1px solid #e8e8e8' : ''}`,
							borderTop: `${border ? '1px solid #e8e8e8' : ''}`,
							textAlign: item.align || 'left',
						}"
						v-for="(item, index) in transColumns"
						:key="index"
					>
						<template>
							{{ sums[index] || item.emptyString }}
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import summary from '../js/summary.js'
export default {
	mixins: [summary],
}
</script>
<style lang="scss" scoped>
.zb-table-footer {
	background: #fafafa;
	width: fit-content;
	min-width: 100%;
	position: sticky;
	bottom: 0;
	z-index: 2;
	.item-tr {
		display: flex;
		min-width: 100%;
	}
	.item-th {
		padding-left: 8px;
		line-height: 39px;
		height: 40px;
		//display: flex;
		//align-items: center;
		box-sizing: border-box;
		flex-shrink: 0;
		width: 100px;
		padding-right: 20px;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		overflow-wrap: break-word;
		border-bottom: 1px solid #e8e8e8;
	}
	.zb-table-fixed {
		min-width: 100%;
	}
	.zb-stick-side {
		position: sticky;
		bottom: 0;
		left: 0;
		z-index: 2;
		//border-right: solid 1rpx #dbdbdb;
		box-sizing: border-box;
		background: #fafafa;
		//box-shadow: 6px 0 6px -4px #ccc;
	}
}
</style>
